<template>
  <div class="tab-bar">
    <div
      v-for="(item) in list"
      :key="item.key"
      class="tab-item"
      :class="{'active': item.key === active}"
      @click="tabChange(item)"
    >
      {{item.value}}
    </div>
    <div v-if="list.length > 1" class="tab-swipe" :style="{'left': swipeLeft}"></div>
  </div>
</template>

<script>
export default {
  props: {
    list: {
      type: Array,
      default: () => []
    },
  },
  data() {
    return {
      active: '1',
      swipeLeft: this.list[0].swipeLeft
    }
  },
  methods: {
    tabChange(item) {
      this.active = item.key
      this.swipeLeft = item.swipeLeft
      this.$emit('change', item.key)
    }
  },
}
</script>

<style lang="stylus">
.tab-bar {
  height: getPx(50);
  position: relative;
  .tab-item {
    color: #C2C5CE;
    font-size: getPx(18);
    height: 100%;
    padding: 0 getPx(20);
    display: inline-block;
    cursor: pointer;
    &.active {
      color: #fff;
      font-size: getPx(24);
    }  
  }
  .tab-swipe {
    position: absolute;
    left: 0;
    bottom: 0; 
    background: #fff;  
    height: getPx(4);
    width: getPx(40);
    border-radius: 0 0 getPx(4) getPx(4);
    transition: all $trans-time; 
  }
}
</style>